<template>
  <div id="realMonitor" class="realMonitor">
    <div class="search">
      <el-button
        class="seletBtn top"
        size="small"
        type="success"
        icon="el-icon-circle-plus-outline"
        @click="selectBridge"
        >桥梁选择</el-button
      >
      <el-tabs
        class="top"
        v-model="editableTabsValue"
        type="card"
        closable
        @tab-remove="removeTab"
      >
        <el-tab-pane
          size="small"
          :key="item.id"
          v-for="item in editableTabs"
          :label="item.name"
          :name="item.id"
        ></el-tab-pane>
      </el-tabs>
    </div>
    <div class="realMonitor-realData">
      <CardContainer headerName="实时数据">
        <template slot="card-content">
          <!-- 一级分类 二级分类筛选 -->
          <p style="margin-top: 15px">
            <el-select
              @change="selectFirst"
              v-model="value1"
              multiple
              collapse-tags
              placeholder="请选择一级分类"
            >
              <el-option
                v-for="item in optionData"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
            <el-select
              v-model="value2"
              multiple
              collapse-tags
              style="margin-left: 20px;"
              placeholder="请选择二级分类"
            >
              <el-option
                v-for="item in secondData"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
            <el-button
              @click="search"
              style="margin-left: 15px"
              type="primary"
              icon="el-icon-search"
            ></el-button>
          </p>
          <div class="topContainer">
            <div ref="map" class="map"></div>
            <!-- 第二个地图 -->
            <div ref="secondMap" class="secondMap"></div>
          </div>
          <!-- v-if="sensorId != ''" -->
          <div v-loading="loading" class="baseLine">
            <p class="tabs">
              <span
                @click="activeTab = 1"
                :class="activeTab == 1 ? 'activeTab' : ''"
                >实时</span
              >
              <span
                @click="activeTab = 2"
                :class="activeTab == 2 ? 'activeTab' : ''"
                >历史</span
              >
              <span
                @click="activeTab = 3"
                :class="activeTab == 3 ? 'activeTab' : ''"
                >超限</span
              >
            </p>
            <div class="realMonitor-tabContent">
              <div class="realMonitor-all realMonitor-left">
                <div class="realMonitor-realLine">
                  <!-- :xAxisData="xAxisData" -->
                  <CommonLineChart
                    ref="ddd"
                    :xAxisData="xAxisRealData"
                    :seriesData="seriesRealData"
                    :infoObj="infoObj"
                  ></CommonLineChart>
                </div>
              </div>
              <div class="realMonitor-right">
                <div class="realMonitor-right-player">
                  <PlayerBox></PlayerBox>
                </div>
              </div>
            </div>
          </div>

          <div
            v-loading="loading"
            v-if="xgPointList.length > 0"
            class="baseLine"
          >
            <p class="tabs xgTabs">
              <span
                @click="activeTab = 1"
                :class="activeTab == 1 ? 'activeTab' : ''"
                >实时</span
              >
              <span
                @click="activeTab = 2"
                :class="activeTab == 2 ? 'activeTab' : ''"
                >历史</span
              >
              <span
                @click="activeTab = 3"
                :class="activeTab == 3 ? 'activeTab' : ''"
                >超限</span
              >

              <el-select v-model="value" placeholder="请选择相关点">
                <el-option
                  v-for="(item, key) in options"
                  :key="key"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </p>
            <div class="realMonitor-tabContent">
              <div class="realMonitor-all realMonitor-left">
                <div class="realMonitor-realLine">
                  <!-- :xAxisData="xAxisData" -->
                  <CommonLineChartX
                    ref="xgd"
                    :xAxisData="xgXAxisRealData"
                    :seriesData="xgSeriesRealData"
                    :infoObj="infoObj"
                  ></CommonLineChartX>
                </div>
              </div>
              <div class="realMonitor-right">
                <div class="realMonitor-right-player">
                  <PlayerBoxX></PlayerBoxX>
                </div>
              </div>
            </div>
          </div>
        </template>
      </CardContainer>
    </div>
    <SelectBridge ref="selectBridge" @getData="getData"></SelectBridge>
  </div>
</template>

<script>
// card 容器组件
import CardContainer from "../components/CardContainer";
// 搜索tab容器
import TabSearch from "../components/TabSearch";

import echarts from "echarts";
import VuePerfectScrollbar from "vue-perfect-scrollbar";
import CommonLineChart from "../components/CommonLineChart";
import CommonLineChartX from "../components/CommonLineChartX";

import CommonPointCard from "../components/CommonPointCard";
import PlayerBox from "../components/PlayerBox";
import PlayerBoxX from "../components/PlayerBoxX";
import SelectBridge from "../components/SelectBridge";

import mapboxgl from "mapbox-gl";
import base from "../../../api/base";
import { gettime } from "@/util.js";

import { mapState, mapMutations } from "vuex"; //realMonitor

export default {
  data() {
    return {
      optionData: [],
      secondData: [],
      value1: [],
      value2: [],
      loading: false,
      map: "",
      secondMap: "",
      inter: "",
      xginter: "",
      initName: "立面",
      activeTabName: "real",
      activeTab: 0,
      upload: base.UPLOADURL,
      download: base.DOWNLOADURL,
      imageUrl: require("../../../assets/mapbox/bg.png"),
      geojson: {
        type: "FeatureCollection",
        features: []
      },
      arr: [],
      secondArr: [],
      zoom: 15.9, // 缩放级别
      proportion: "", //图片比例
      yPoint: 0.0010127542875721929,
      coordinates: [
        [-76.54335737228394, 39.18579907229748],
        [-76.52803659439087, 39.1838364847587],
        [-76.5295386314392, 39.17683392507606],
        [-76.54520273208618, 39.17876344106642]
      ],
      xAxisRealData: [],
      seriesRealData: [],

      xgXAxisRealData: [],
      xgSeriesRealData: [],

      infoObj: {
        max: "2.445mm/s",
        min: "-2.224mm/s",
        average: "0.235mm/s",
        variance: "0.213"
      },

      //
      editableTabsValue: "1",
      editableTabs: [],
      tabIndex: 1,

      options: [],
      value: ""
    };
  },
  computed: {
    ...mapState("realMonitor", {
      bridgeId: "bridgeId",
      // 传感器
      sensor: "sensor",
      // 传感器 id
      sensorId: "sensorId",
      // 传感器code
      sensorCode: "sensorCode",
      pointDetail: "pointDetail",
      xgPointList: "xgPointList",
      selectXgPoint: "selectXgPoint",
      xgPointDetail: "xgPointDetail",

      // sensor
      xgSensor: "xgSensor",
      // 传感器 id
      xgSensorId: "xgSensorId",
      // 传感器code
      xgSensorCode: "xgSensorCode",

      // 测dian
      pointId: "pointId",
      pointCode: "pointCode",
      // 相关点
      xgPointId: "xgPointId",
      xgPointCode: "xgPointCode"
    })
  },
  components: {
    CardContainer,
    TabSearch,
    VuePerfectScrollbar,
    CommonLineChart,
    CommonLineChartX,
    CommonPointCard,
    PlayerBox,
    PlayerBoxX,
    SelectBridge
  },
  mounted() {
    this.initMap();

    setTimeout(() => {
      this.getBridgeAll();
    }, 1000);
  },
  methods: {
    ...mapMutations("realMonitor", {
      setBridgeId: "BRIDGEID",
      setSensorId: "SENSORID",
      setSensorCode: "SENSORCODE",
      setPointDetail: "POINTDETAIL",
      setXgPointDetail: "XGPOINTDETAIL",
      setSensor: "SENSOR",
      setXgPointList: "XGPOINTLIST",
      setSelectXgPoint: "SELECTXGPOINT",

      // sensor
      setXgSensor: "XGSENSOR",
      // 传感器 id
      setXgSensorId: "XGSENSORID",
      // 传感器code
      setXgSensorCode: "XGSENSORCODE",
      // 测点相关
      setpointid: "SETPOINTID",
      setpointcode: "SETPOINTCODE",
      setxgpointid: "SETXGPOINTID",
      setxgpointcode: "SETXGPOINTCODE"
    }),
    //获取截面下 的所有测点
    getPointAll(bridgeId, crossSectionId, firstIdList, secondIdList) {
      let _params = {
        bridgeId: bridgeId,
        crossSectionId: crossSectionId
        // firstIdList: firstIdList,
        // secondIdList: secondIdList
      };
      if (firstIdList.length > 0) {
        _params.firstIdList = firstIdList;
      }
      if (secondIdList.length > 0) {
        _params.secondIdList = secondIdList;
      }
      this.$api.mearsuringPointSetting.getCd(_params).then(res => {
        console.log("获取所有测点数据", res.data.data[0]);
        return res.data.data[0];
      });
    },
    // 根据桥梁 id 获取一级分类
    getFirstTypeList() {
      this.$api.healthMonitor
        .getFirstTypeList({
          bridgeId: this.bridgeId
        })
        .then(res => {
          console.log("一级分类", res.data.data[0]);
          this.optionData = res.data.data[0];
        });
    },
    // 根据一级分类获取二级分类
    getSecondTypeList(list) {
      this.$api.healthMonitor
        .getSecondTypeList({
          bridgeId: this.bridgeId,
          firstIdList: list
        })
        .then(res => {
          console.log("二级分类", res.data.data[0]);
          this.secondData = res.data.data[0];
        });
    },
    // 选择一级分类触发的方法
    selectFirst(e) {
      console.log(this.value1);
      this.secondData = [];
      this.value2 = [];
      this.getSecondTypeList(this.value1);
    },
    // 点击搜索触发的方法
    search() {
      clearInterval(this.inter);
      clearInterval(this.xginter);

      this.xgXAxisRealData = [];
      this.xgSeriesRealData = [];
      this.xAxisRealData = [];
      this.seriesRealData = [];

      this.map.setCenter([0, 0]);
      this.setSensorId("");
      this.setSensorCode("");
      this.setSensor("");
      // 根据桥梁 id 获取桥梁下立面
      this.$api.mearsuringPointSetting
        .getFacade({
          ownId: this.bridgeId
        })
        .then(res => {
          // 移除所有的点
          if (this.arr.length > 0) {
            this.arr.map(v => {
              v.remove();
            });
            this.arr = [];
          }

          console.log("立面数据", res.data.data[0][0]);
          this.initName = "立面";
          let data = res.data.data[0][0];
          if (!data) {
            this.imageUrl = require("../../../assets/mapbox/bg.png");
          } else {
            this.imageUrl = this.download + data.twoDimension.path;
            var maps = this.secondMap.getSource("overlay");

            // 初始化获取截面
            if (this.secondArr.length > 0) {
              this.secondArr.map(v => {
                v.remove();
              });
              this.secondArr = [];
            }
            this.secondMap.setCenter([0, 0]);
            this.secondMap.setZoom(15.9);
            this.initName = "截面";

            // //根据截面查询点
            if (data.viewList.length > 0) {
              // 更新地图上的点/图片/位置点
              // 获取当前选中的一级分类 二级分类
              let firstIdList = this.value1;
              let secondIdList = this.value2;
              let _params = {
                bridgeId: this.bridgeId
                // facadeId: data.facadeId
              };
              if (firstIdList.length > 0) {
                _params.firstIdList = firstIdList;
              }
              if (secondIdList.length > 0) {
                _params.secondIdList = secondIdList;
              }
              // 获取一级分类截面数据
              this.$api.mearsuringPointSetting.getGm(_params).then(res => {
                console.log("过滤后的数据", res.data.data[0], data.viewList);
                let oldList = res.data.data[0];
                let newList = [];
                data.viewList.map((item, key) => {
                  if (oldList.length > 0) {
                    oldList.map((i, k) => {
                      if (item.properties.id == i.id) {
                        newList.push(item);
                      }
                    });
                  }
                });
                // newList
                  this.$api.mearsuringPointSetting
                  .getFacadePoint({
                    id: newList[0].properties.id
                  })
                  .then(res => {
                    console.log("测点数据", res.data.data[0][0]);
                    let datas = res.data.data[0][0];
                    let _p = {
                  bridgeId: this.bridgeId,
                  crossSectionId: newList[0].properties.id
                };
                if (this.value1.length > 0) {
                  _p.firstIdList = this.value1;
                }
                if (this.value2.length > 0) {
                  _p.secondIdList = this.value2;
                }
                this.$api.mearsuringPointSetting.getCd(_p).then(res => {
                  console.log("获取所有测点数据", res.data.data[0]);
                  let searchData = res.data.data[0]


                   if (datas && datas.picturePath) {
                      // this.imageUrl = this.download + datas.picturePath;
                      maps.updateImage({
                        url: this.download + datas.picturePath
                      });
                    }

                    if (datas && datas.coordinates) {
                      maps.setCoordinates(datas.coordinates);
                    }
                    // 渲染点位
                    if (datas && datas.viewList && datas.viewList.length > 0) {
                      let dataList = [];
                      datas.viewList.map(item => {
                        searchData.map((i,k)=>{
                        if(item.properties.id == i.id){
                          dataList.push(item)
                          this.secondInitMarker(item);
                        }
                      })
                      });

                      // 查询默认点
                      // 查测dian
                      this.$api.mearsuringPointSetting
                        .getPointDetail({
                          id: dataList[0].properties.id
                        })
                        .then(res => {
                          console.log("测点详细信息", res, res.data.data[0][0]);
                          //         setpointid:"SETPOINTID",
                          // setpointcode:"SETPOINTCODE",
                          // setxgpointid:"SETXGPOINTID",
                          // setxgpointcode:"SETXGPOINTCODE"
                          // 设置测点id code
                          this.setpointid(res.data.data[0][0].id);
                          this.setpointcode(res.data.data[0][0].code);

                          // 相关点数据
                          let xgPointList = res.data.data[0][0]
                            .associationMeasurePointId
                            ? res.data.data[0][0].associationMeasurePointId
                            : [];
                          this.setXgPointList(xgPointList);
                          if (
                            res.data.data[0][0].associationMeasurePointId &&
                            res.data.data[0][0].associationMeasurePointId
                              .length > 0
                          ) {
                            // 当前选中相关点
                            let selectXgPointList =
                              res.data.data[0][0].associationMeasurePointId[0];
                            this.setSelectXgPoint(selectXgPointList);
                            this.value = selectXgPointList;
                            // 获取相关点详细数据
                            this.getxgPointDetail(selectXgPointList);
                          }
                          console.log(
                            "store 的数据",
                            this.xgPointList,
                            this.selectXgPoint
                          );

                          this.setPointDetail(res.data.data[0][0]);
                        });

                      // 查传感器
                      this.$api.mearsuringPointSetting
                        .getDeviceSensor({
                          pointId: datas.viewList[0].properties.id
                        })
                        .then(res => {
                          console.log("测点传感器的数据", res.data.data[0][0]);
                          if (res.data.data[0][0]) {
                            // 传感器信息
                            this.activeTab = 1;
                            let sensorId = res.data.data[0][0].id;
                            let sensorCode = res.data.data[0][0].code;
                            this.setSensorId(sensorId);
                            this.setSensorCode(sensorCode);
                            this.setSensor(res.data.data[0][0]);
                          } else {
                            this.setSensorId("");
                            this.setSensorCode("");
                            this.setSensor("");
                            this.$vs.notify({
                              text: "暂无传感器信息",
                              color: "warning",
                              icon: "warning"
                            });
                          }
                        });
                    }
                });


                  });
              });
            } else {
              let img = require("../../../assets/mapbox/bg.png");
              maps.updateImage({ url: img });
            }
          }

          console.log(this.imageUrl);
          // 更新地图上的点/图片/位置点
          var map = this.map.getSource("overlay");
          console.log(map);
          this.map.setZoom(15.9);
          map.updateImage({ url: this.imageUrl });
          if (data) {
            map.setCoordinates(data.coordinates);
          }
          // 渲染点位
          if (data && data.viewList.length > 0) {
            // 获取当前选中的一级分类 二级分类
            let firstIdList = this.value1;
            let secondIdList = this.value2;
            let _params = {
              bridgeId: this.bridgeId
              // facadeId: data.facadeId
            };
            if (firstIdList.length > 0) {
              _params.firstIdList = firstIdList;
            }
            if (secondIdList.length > 0) {
              _params.secondIdList = secondIdList;
            }
            // 获取一级分类截面数据
            this.$api.mearsuringPointSetting.getGm(_params).then(res => {
              console.log("过滤后的数据", res.data.data[0], data.viewList);
              let oldList = res.data.data[0];
              let newList = [];
              data.viewList.map((item, key) => {
                if (oldList.length > 0) {
                  oldList.map((i, k) => {
                    if (item.properties.id == i.id) {
                      newList.push(item);
                    }
                  });
                }
              });
              newList.map(item => {
                this.initMarker(item);
              });
            });
          }
        });
    },

    getxgPointDetail(id) {
      this.$api.mearsuringPointSetting
        .getPointDetail({
          id: id
        })
        .then(res => {
          this.setXgPointDetail(res.data.data[0][0]);
        });
    },
    handleTabClick(tab, event) {
      this.activeTabName = tab.name;
    },

    selectBridge() {
      // console.log(this.$refs.selectBridge);
      this.$refs.selectBridge.init();
    },
    getData(val) {
      console.log("选择桥梁的数据", val);
      this.editableTabs = val;
      this.editableTabsValue = val[0].id;
      this.setBridgeId(val[0].id);
    },

    removeTab(id) {
      console.log(id);
      let tabs = this.editableTabs;
      let activeName = this.editableTabsValue;
      if (activeName === id) {
        tabs.forEach((tab, index) => {
          if (tab.id === id) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.id;
            }
          }
        });
      }

      this.editableTabsValue = activeName;
      this.editableTabs = tabs.filter(tab => tab.id !== id);
      // console.log(this.editableTabsValue);
      this.setBridgeId(this.editableTabsValue);
    },
    // 获取所有桥梁
    getBridgeAll() {
      this.$api.mearsuringPointSetting.getBridgeAll().then(res => {
        let ownInfo = JSON.parse(localStorage.getItem("ownInfo"))[0]; // 当前视图
        let birdgeListAll = res.data.data[0];
        birdgeListAll.map((item, key) => {
          if (item.id == ownInfo.code) {
            this.editableTabs = [item];
            this.editableTabsValue = item.id;
            this.setBridgeId(item.id);
            this.getFirstTypeList();
          }
        });
      });
    },

    // 初始化地图
    initMap() {
      mapboxgl.accessToken =
        // "pk.eyJ1IjoieHVzaGFucGVpIiwiYSI6ImNqenl5M2t0aTA0dzczY3AzdXJoajB6emcifQ.Gpduip9bhda1q8BX2Xc2UQ";
        "pk.eyJ1IjoiYW9mZW5nMjAwMCIsImEiOiJja252a3Q4cWkwazU3MnZwZDZ2MDN0MDg5In0.7HHfJfVC4Mht7IeL5yO4kQ";
      var mapStyle = {
        version: 8,
        name: "Dark",
        sources: {
          mapbox: {
            type: "vector",
            url: "mapbox://mapbox.mapbox-streets-v8"
          },
          overlay: {
            type: "image",
            url: this.imageUrl,
            coordinates: this.coordinates
          }
        },
        layers: [
          {
            id: "overlay",
            source: "overlay",
            type: "raster"
          }
        ]
      };
      // 初始化第一个地图
      this.map = new mapboxgl.Map({
        style: mapStyle,
        center: [0, 0], //地图中⼼经纬度
        zoom: this.zoom, //缩放级别
        // minZoom: 15.5,
        maxZoom: 24,
        pitch: 0,
        // bearing: -17.6,
        container: this.$refs.map,
        zoomAdjust: null,
        antialias: true,
        dragRotate: false,
        touchZoomRotate: false
      });

      // 初始化第二个地图
      this.secondMap = new mapboxgl.Map({
        style: mapStyle,
        center: [0, 0], //地图中⼼经纬度
        zoom: this.zoom, //缩放级别
        // minZoom: 15.5,
        maxZoom: 24,
        pitch: 0,
        // bearing: -17.6,
        container: this.$refs.secondMap,
        zoomAdjust: null,
        antialias: true,
        dragRotate: false,
        touchZoomRotate: false
      });
      console.log("初始化完成");
    },

    initMarker(data) {
      // 创建一个点
      var el = document.createElement("div");
      el.className = "marker";
      el.style.backgroundSize = "24px";
      el.style.backgroundRepeat = "no-repeat";
      el.style.backgroundPosition = "center";
      el.style.backgroundImage = "url(point.png)";
      el.style.cursor = "grab";
      /**
       * 点击立面上的点的方法
       * 用于获取截面以及截面上的点并且初始化截面信息
       */
      el.addEventListener("click", e => {
        e.stopPropagation();
        if (this.secondArr.length > 0) {
          this.secondArr.map(v => {
            v.remove();
          });
          this.secondArr = [];
        }
        this.secondMap.setCenter([0, 0]);
        this.secondMap.setZoom(15.9);
        this.initName = "截面";

        //根据截面查询点

        this.$api.mearsuringPointSetting
                  .getFacadePoint({
                    id: data.properties.id
                  })
                  .then(res => {
                    console.log("测点数据", res.data.data[0][0]);
                    let datas = res.data.data[0][0];
                    let _p = {
                  bridgeId: this.bridgeId,
                  crossSectionId: newList[0].properties.id
                };
                if (this.value1.length > 0) {
                  _p.firstIdList = this.value1;
                }
                if (this.value2.length > 0) {
                  _p.secondIdList = this.value2;
                }
                this.$api.mearsuringPointSetting.getCd(_p).then(res => {
                  console.log("获取所有测点数据", res.data.data[0]);
                  let searchData = res.data.data[0]


                   if (datas && datas.picturePath) {
                      // this.imageUrl = this.download + datas.picturePath;
                      maps.updateImage({
                        url: this.download + datas.picturePath
                      });
                    }

                    if (datas && datas.coordinates) {
                      maps.setCoordinates(datas.coordinates);
                    }
                    // 渲染点位
                    if (datas && datas.viewList && datas.viewList.length > 0) {
                      let dataList = [];
                      datas.viewList.map(item => {
                        searchData.map((i,k)=>{
                        if(item.properties.id == i.id){
                          dataList.push(item)
                          this.secondInitMarker(item);
                        }
                      })
                      });

                      // 查询默认点
                      // 查测dian
                      this.$api.mearsuringPointSetting
                        .getPointDetail({
                          id: dataList[0].properties.id
                        })
                        .then(res => {
                          console.log("测点详细信息", res, res.data.data[0][0]);
                          //         setpointid:"SETPOINTID",
                          // setpointcode:"SETPOINTCODE",
                          // setxgpointid:"SETXGPOINTID",
                          // setxgpointcode:"SETXGPOINTCODE"
                          // 设置测点id code
                          this.setpointid(res.data.data[0][0].id);
                          this.setpointcode(res.data.data[0][0].code);

                          // 相关点数据
                          let xgPointList = res.data.data[0][0]
                            .associationMeasurePointId
                            ? res.data.data[0][0].associationMeasurePointId
                            : [];
                          this.setXgPointList(xgPointList);
                          if (
                            res.data.data[0][0].associationMeasurePointId &&
                            res.data.data[0][0].associationMeasurePointId
                              .length > 0
                          ) {
                            // 当前选中相关点
                            let selectXgPointList =
                              res.data.data[0][0].associationMeasurePointId[0];
                            this.setSelectXgPoint(selectXgPointList);
                            this.value = selectXgPointList;
                            // 获取相关点详细数据
                            this.getxgPointDetail(selectXgPointList);
                          }
                          console.log(
                            "store 的数据",
                            this.xgPointList,
                            this.selectXgPoint
                          );

                          this.setPointDetail(res.data.data[0][0]);
                        });

                      // 查传感器
                      this.$api.mearsuringPointSetting
                        .getDeviceSensor({
                          pointId: datas.viewList[0].properties.id
                        })
                        .then(res => {
                          console.log("测点传感器的数据", res.data.data[0][0]);
                          if (res.data.data[0][0]) {
                            // 传感器信息
                            this.activeTab = 1;
                            let sensorId = res.data.data[0][0].id;
                            let sensorCode = res.data.data[0][0].code;
                            this.setSensorId(sensorId);
                            this.setSensorCode(sensorCode);
                            this.setSensor(res.data.data[0][0]);
                          } else {
                            this.setSensorId("");
                            this.setSensorCode("");
                            this.setSensor("");
                            this.$vs.notify({
                              text: "暂无传感器信息",
                              color: "warning",
                              icon: "warning"
                            });
                          }
                        });
                    }
                });


                  });
      });
      // 创建文字信息
      var textEl = document.createElement("div");
      textEl.className = "marker";
      textEl.textContent = data.properties.message;
      textEl.style.backgroundColor = "rgba(51,51,51,.7)";
      textEl.style.height = "20px";
      textEl.style.borderRadius = "3px";
      textEl.style.paddingLeft = "5px";
      textEl.style.paddingRight = "5px";
      textEl.style.marginTop = "50px";
      textEl.style.display = "inline-block";
      textEl.style.color = "#3ED385";
      el.appendChild(textEl);
      textEl.addEventListener("click", e => {
        e.stopPropagation();
      });
      // add marker to map
      var marker = new mapboxgl.Marker(el)
        .setLngLat(data.geometry.coordinates)
        .setDraggable(false)
        .addTo(this.map);
      this.arr.push(marker);

      marker.data = data.properties;
    },

    secondInitMarker(data) {
      // 创建一个点
      var el = document.createElement("div");
      el.className = "marker";
      el.style.backgroundSize = "24px";
      el.style.backgroundRepeat = "no-repeat";
      el.style.backgroundPosition = "center";
      el.style.backgroundImage = "url(point.png)";
      el.style.cursor = "grab";
      /**
       * 点击截面上的点的方法
       * 用于实时数据
       */
      el.addEventListener("click", e => {
        clearInterval(this.inter);
        clearInterval(this.xginter);
        e.stopPropagation();
        // 查测dian
        this.$api.mearsuringPointSetting
          .getPointDetail({
            id: data.properties.id
          })
          .then(res => {
            console.log("测点详细信息", res, res.data.data[0][0]);
            //         setpointid:"SETPOINTID",
            // setpointcode:"SETPOINTCODE",
            // setxgpointid:"SETXGPOINTID",
            // setxgpointcode:"SETXGPOINTCODE"
            // 设置测点id code
            this.setpointid(res.data.data[0][0].id);
            this.setpointcode(res.data.data[0][0].code);
            // 相关点数据
            let xgPointList = res.data.data[0][0].associationMeasurePointId
              ? res.data.data[0][0].associationMeasurePointId
              : [];
            this.setXgPointList(xgPointList);
            if (
              res.data.data[0][0].associationMeasurePointId &&
              res.data.data[0][0].associationMeasurePointId.length > 0
            ) {
              // 当前选中相关点
              let selectXgPointList =
                res.data.data[0][0].associationMeasurePointId[0];
              this.setSelectXgPoint(selectXgPointList);
              console.log("初始化选择相关点", selectXgPointList);
              this.value = selectXgPointList;
              // 获取相关点详细数据
              this.getxgPointDetail(selectXgPointList);
            }

            console.log("store 的数据", this.xgPointList, this.selectXgPoint);

            this.setPointDetail(res.data.data[0][0]);
          });

        // 查传感器
        this.$api.mearsuringPointSetting
          .getDeviceSensor({
            pointId: data.properties.id
          })
          .then(res => {
            console.log("测点传感器的数据", res.data.data[0][0]);
            if (res.data.data[0][0]) {
              // 传感器信息
              this.activeTab = 1;
              let sensorId = res.data.data[0][0].id;
              let sensorCode = res.data.data[0][0].code;
              this.setSensorId(sensorId);
              this.setSensorCode(sensorCode);
              this.setSensor(res.data.data[0][0]);
            } else {
              this.setSensorId("");
              this.setSensorCode("");
              this.setSensor("");
              this.$vs.notify({
                text: "暂无传感器信息",
                color: "warning",
                icon: "warning"
              });
            }
          });
        // 切换
        clearInterval(this.inter);
        clearInterval(this.xginter);
        this.getRealData();
        this.xgGetRealData();
      });
      // 创建文字信息
      var textEl = document.createElement("div");
      textEl.className = "marker";
      textEl.textContent = data.properties.message;
      textEl.style.backgroundColor = "rgba(51,51,51,.7)";
      textEl.style.height = "20px";
      textEl.style.borderRadius = "3px";
      textEl.style.paddingLeft = "5px";
      textEl.style.paddingRight = "5px";
      textEl.style.marginTop = "50px";
      textEl.style.display = "inline-block";
      textEl.style.color = "#3ED385";
      el.appendChild(textEl);
      textEl.addEventListener("click", e => {
        e.stopPropagation();
      });
      // add marker to map
      var marker = new mapboxgl.Marker(el)
        .setLngLat(data.geometry.coordinates)
        .setDraggable(false)
        .addTo(this.secondMap);
      this.secondArr.push(marker);

      marker.data = data.properties;
    },

    // 时间戳转换

    parseTime(timestamp) {
      var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
      var h =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      var m =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":";
      var s =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();

      let strDate = Y + M + D + h + m + s;
      console.log(strDate); //2020-05-08 17:44:56
      return strDate;
    },
    /**
     * 选中的dian
     */
    // 获取实时数据方法
    getRealData() {
      clearInterval(this.inter);
      clearInterval(this.xginter);
      this.xAxisRealData = [];
      this.seriesRealData = [];
      if (this.sensorId && this.sensorCode) {
        let data = [];
        this.$api.mearsuringPointSetting
          .getRealData({
            sensorId: this.pointId,
            sensorCode: this.pointCode,
            bridgeId: this.bridgeId
            // sensorId: 1,
            // sensorCode: "GWD-03-01",
            // bridgeId: "758323582542544896"
          })
          .then(res => {
            console.log("实时数据", res.data.data);
            if (res.data.code == 500) {
              clearInterval(this.inter);
              clearInterval(this.xginter);
            }
            data.push(res.data.data[0]);
            this.xAxisRealData = [];
            this.seriesRealData = [];
            data.map((item, key) => {
              // xAxisData seriesData
              let time = this.parseTime(item.time);
              this.xAxisRealData.push(time);
              this.seriesRealData.push(item.value);
            });
            this.$refs.ddd.drawLine();

            if (res.data.success) {
              this.inter = setInterval(() => {
                this.$api.mearsuringPointSetting
                  .getRealData({
                    sensorId: this.pointId,
                    sensorCode: this.pointCode,
                    bridgeId: this.bridgeId
                    // sensorId: 1,
                    // sensorCode: "GWD-03-01",
                    // bridgeId: "758323582542544896"
                  })
                  .then(res => {
                    console.log(res);
                    let time = this.parseTime(res.data.data[0].time);
                    this.xAxisRealData.push(time);
                    this.seriesRealData.push(res.data.data[0].value);
                    if (this.xAxisRealData.length > 20) {
                      // shift
                      this.xAxisRealData.shift();
                      this.seriesRealData.shift();
                    }
                    this.$refs.ddd.drawLine();
                    if (res.data.code == 500) {
                      clearInterval(this.inter);
                      clearInterval(this.xginter);
                    }
                  })
                  .catch(err => {
                    clearInterval(this.inter);
                    clearInterval(this.xginter);
                  });
              }, 5000);
            }
          });
      }
    },
    // 获取历史数据
    getHistoryData() {
      // 获取当前时间戳
      let endTime = new Date().getTime();
      let beginTime = endTime - 600000; // 10分钟数据
      clearInterval(this.inter);
      clearInterval(this.xginter);
      this.xAxisRealData = [];
      this.seriesRealData = [];

      if (this.sensorId && this.sensorCode) {
        // 获取历史数据
        this.$api.mearsuringPointSetting
          .getHistoryData({
            sensorId: this.pointId,
            sensorCode: this.pointCode,
            bridgeId: this.bridgeId,
            // sensorId: 1,
            // sensorCode: "GWD-03-01",
            // bridgeId: "758323582542544896",
            beginTime: this.parseTime(beginTime),
            endTime: this.parseTime(endTime)
          })
          .then(res => {
            this.loading = false;
            let oldData = res.data.data;
            let data = [];
            oldData.map((item, key) => {
              data.push({
                time: this.parseTime(item.time),
                value: item.value
              });
            });

            this.xAxisRealData = [];
            this.seriesRealData = [];
            data.map((item, key) => {
              // xAxisData seriesData
              this.xAxisRealData.push(item.time);
              this.seriesRealData.push(item.value);
            });
          });
      }
    },

    // 获取超限数据
    getCxData() {
      clearInterval(this.inter);
      clearInterval(this.xginter);
      this.xAxisRealData = [];
      this.seriesRealData = [];

      // 获取超限数据
      // 获取当前时间戳
      let endTime = new Date().getTime();
      let beginTime = endTime - 600000; // 10分钟数据
      this.xAxisRealData = [];
      this.seriesRealData = [];

      if (this.sensorId && this.sensorCode) {
        this.$api.mearsuringPointSetting
          .getOverrunData({
            sensorId: this.pointId,
            sensorCode: this.pointCode,
            bridgeId: this.bridgeId,
            // sensorId: 1,
            // sensorCode: "GWD-03-01",
            // bridgeId: "758323582542544896",
            beginTime: this.parseTime(beginTime),
            endTime: this.parseTime(endTime)
          })
          .then(res => {
            console.log("获取超限数据", res.data.data);
            let oldData = res.data.data;
            let data = [];
            oldData.map((item, key) => {
              data.push({
                time: this.parseTime(item.time),
                value: item.value
              });
            });

            this.xAxisRealData = [];
            this.seriesRealData = [];
            data.map((item, key) => {
              // xAxisData seriesData
              this.xAxisRealData.push(item.time);
              this.seriesRealData.push(item.value);
            });
          });
      }
    },

    /**
     * 相关点
     */
    xgGetRealData() {
      this.xgXAxisRealData = [];
      this.xgSeriesRealData = [];
      if (this.xgSensorId && this.xgSensorCode) {
        let data = [];
        this.$api.mearsuringPointSetting
          .getRealData({
            sensorId: this.xgPointId,
            sensorCode: this.xgPointCode,
            bridgeId: this.bridgeId
            // sensorId: 1,
            // sensorCode: "GWD-03-01",
            // bridgeId: "758323582542544896"
          })
          .then(res => {
            console.log("实时数据", res.data.data);
            data.push(res.data.data[0]);
            this.xgXAxisRealData = [];
            this.xgSeriesRealData = [];
            data.map((item, key) => {
              // xAxisData seriesData
              let time = this.parseTime(item.time);
              this.xgXAxisRealData.push(time);
              this.xgSeriesRealData.push(item.value);
            });
            this.$refs.xgd.drawLine();
            if (res.data.code == 500) {
              clearInterval(this.inter);
              clearInterval(this.xginter);
            }
          });

        this.xginter = setInterval(() => {
          this.$api.mearsuringPointSetting
            .getRealData({
              sensorId: this.xgPointId,
              sensorCode: this.xgPointCode,
              bridgeId: this.bridgeId
              // sensorId: 1,
              // sensorCode: "GWD-03-01",
              // bridgeId: "758323582542544896"
            })
            .then(res => {
              console.log(res);
              let time = this.parseTime(res.data.data[0].time);
              this.xgXAxisRealData.push(time);
              this.xgSeriesRealData.push(res.data.data[0].value);
              if (this.xgXAxisRealData.length > 20) {
                // shift
                this.xgXAxisRealData.shift();
                this.xgSeriesRealData.shift();
              }
              this.$refs.xgd.drawLine();
              if (res.data.code == 500) {
                clearInterval(this.inter);
                clearInterval(this.xginter);
              }
            })
            .catch(err => {
              clearInterval(this.inter);
              clearInterval(this.xginter);
            });
        }, 5000);
      }
    },
    // 获取历史数据
    xgGetHistoryData() {
      this.xgXAxisRealData = [];
      this.xgSeriesRealData = [];
      // 获取当前时间戳
      let endTime = new Date().getTime();
      let beginTime = endTime - 600000; // 10分钟数据
      if (this.xgSensorId && this.xgSensorCode) {
        // 获取历史数据
        this.$api.mearsuringPointSetting
          .getHistoryData({
            sensorId: this.xgPointId,
            sensorCode: this.xgPointCode,
            bridgeId: this.bridgeId,
            // sensorId: 1,
            // sensorCode: "GWD-03-01",
            // bridgeId: "758323582542544896",
            beginTime: this.parseTime(beginTime),
            endTime: this.parseTime(endTime)
          })
          .then(res => {
            this.loading = false;
            let oldData = res.data.data;
            let data = [];
            oldData.map((item, key) => {
              data.push({
                time: this.parseTime(item.time),
                value: item.value
              });
            });

            this.xgXAxisRealData = [];
            this.xgSeriesRealData = [];
            data.map((item, key) => {
              // xAxisData seriesData
              this.xgXAxisRealData.push(item.time);
              this.xgSeriesRealData.push(item.value);
            });
          });
      }
    },

    // 获取超限数据
    xgGetCxData() {
      clearInterval(this.inter);
      clearInterval(this.xginter);
      this.xgXAxisRealData = [];
      this.xgSeriesRealData = [];
      // 获取超限数据
      // 获取当前时间戳
      let endTime = new Date().getTime();
      let beginTime = endTime - 600000; // 10分钟数据
      if (this.xgSensorId && this.xgSensorCode) {
        this.$api.mearsuringPointSetting
          .getOverrunData({
            sensorId: this.xgPointId,
            sensorCode: this.xgPointCode,
            bridgeId: this.bridgeId,
            // sensorId: 1,
            // sensorCode: "GWD-03-01",
            // bridgeId: "758323582542544896",
            beginTime: this.parseTime(beginTime),
            endTime: this.parseTime(endTime)
          })
          .then(res => {
            console.log("获取超限数据", res.data.data);
            let oldData = res.data.data;
            let data = [];
            oldData.map((item, key) => {
              data.push({
                time: this.parseTime(item.time),
                value: item.value
              });
            });

            this.xgXAxisRealData = [];
            this.xgSeriesRealData = [];
            data.map((item, key) => {
              // xAxisData seriesData
              this.xgXAxisRealData.push(item.time);
              this.xgSeriesRealData.push(item.value);
            });
          });
      }
    }
  },
  destroyed() {},
  watch: {
    $route: {
      handler(val, oldVal) {
        if (val.path == "/healthMonitor/RealMonitor") {
          this.activeTab = 3;
          this.activeTab = 1;
        } else {
          clearInterval(this.inter);
          clearInterval(this.xginter);
        }
      },
      // 深度观察监听
      deep: true
    },
    bridgeId: {
      handler(newVal) {
        clearInterval(this.inter);
        clearInterval(this.xginter);
        this.value1 = [];
        this.value2 = [];

        this.xgXAxisRealData = [];
        this.xgSeriesRealData = [];
        this.xAxisRealData = [];
        this.seriesRealData = [];

        this.map.setCenter([0, 0]);
        this.setSensorId("");
        this.setSensorCode("");
        this.setSensor("");
        // 根据桥梁 id 获取桥梁下立面
        this.$api.mearsuringPointSetting
          .getFacade({
            ownId: this.bridgeId
          })
          .then(res => {
            // 移除所有的点
            if (this.arr.length > 0) {
              this.arr.map(v => {
                v.remove();
              });
              this.arr = [];
            }

            console.log("立面数据", res.data.data[0][0]);
            this.initName = "立面";
            let data = res.data.data[0][0];
            if (!data) {
              this.imageUrl = require("../../../assets/mapbox/bg.png");
            } else {
              this.imageUrl = this.download + data.twoDimension.path;
              var maps = this.secondMap.getSource("overlay");

              // 初始化获取截面
              if (this.secondArr.length > 0) {
                this.secondArr.map(v => {
                  v.remove();
                });
                this.secondArr = [];
              }
              this.secondMap.setCenter([0, 0]);
              this.secondMap.setZoom(15.9);
              this.initName = "截面";

              // //根据截面查询点
              if (data.viewList.length > 0) {
                // 更新地图上的点/图片/位置点
                // 获取当前选中的一级分类 二级分类
                let firstIdList = this.value1;
                let secondIdList = this.value2;
                let _params = {
                  bridgeId: this.bridgeId
                  // facadeId: data.facadeId
                };
                if (firstIdList.length > 0) {
                  _params.firstIdList = firstIdList;
                }
                if (secondIdList.length > 0) {
                  _params.secondIdList = secondIdList;
                }
                // 获取一级分类截面数据
                this.$api.mearsuringPointSetting.getGm(_params).then(res => {
                  console.log("过滤后的数据", res.data.data[0], data.viewList);
                  let oldList = res.data.data[0];
                  let newList = [];
                  data.viewList.map((item, key) => {
                    if (oldList.length > 0) {
                      oldList.map((i, k) => {
                        if (item.properties.id == i.id) {
                          newList.push(item);
                        }
                      });
                    }
                  });
                  // newList
                  this.$api.mearsuringPointSetting
                  .getFacadePoint({
                    id: newList[0].properties.id
                  })
                  .then(res => {
                    console.log("测点数据", res.data.data[0][0]);
                    let datas = res.data.data[0][0];
                    let _p = {
                  bridgeId: this.bridgeId,
                  crossSectionId: newList[0].properties.id
                };
                if (this.value1.length > 0) {
                  _p.firstIdList = this.value1;
                }
                if (this.value2.length > 0) {
                  _p.secondIdList = this.value2;
                }
                this.$api.mearsuringPointSetting.getCd(_p).then(res => {
                  console.log("获取所有测点数据", res.data.data[0]);
                  let searchData = res.data.data[0]


                   if (datas && datas.picturePath) {
                      // this.imageUrl = this.download + datas.picturePath;
                      maps.updateImage({
                        url: this.download + datas.picturePath
                      });
                    }

                    if (datas && datas.coordinates) {
                      maps.setCoordinates(datas.coordinates);
                    }
                    // 渲染点位
                    if (datas && datas.viewList && datas.viewList.length > 0) {
                      let dataList = [];
                      datas.viewList.map(item => {
                        searchData.map((i,k)=>{
                        if(item.properties.id == i.id){
                          dataList.push(item)
                          this.secondInitMarker(item);
                        }
                      })
                      });

                      // 查询默认点
                      // 查测dian
                      this.$api.mearsuringPointSetting
                        .getPointDetail({
                          id: dataList[0].properties.id
                        })
                        .then(res => {
                          console.log("测点详细信息", res, res.data.data[0][0]);
                          //         setpointid:"SETPOINTID",
                          // setpointcode:"SETPOINTCODE",
                          // setxgpointid:"SETXGPOINTID",
                          // setxgpointcode:"SETXGPOINTCODE"
                          // 设置测点id code
                          this.setpointid(res.data.data[0][0].id);
                          this.setpointcode(res.data.data[0][0].code);

                          // 相关点数据
                          let xgPointList = res.data.data[0][0]
                            .associationMeasurePointId
                            ? res.data.data[0][0].associationMeasurePointId
                            : [];
                          this.setXgPointList(xgPointList);
                          if (
                            res.data.data[0][0].associationMeasurePointId &&
                            res.data.data[0][0].associationMeasurePointId
                              .length > 0
                          ) {
                            // 当前选中相关点
                            let selectXgPointList =
                              res.data.data[0][0].associationMeasurePointId[0];
                            this.setSelectXgPoint(selectXgPointList);
                            this.value = selectXgPointList;
                            // 获取相关点详细数据
                            this.getxgPointDetail(selectXgPointList);
                          }
                          console.log(
                            "store 的数据",
                            this.xgPointList,
                            this.selectXgPoint
                          );

                          this.setPointDetail(res.data.data[0][0]);
                        });

                      // 查传感器
                      this.$api.mearsuringPointSetting
                        .getDeviceSensor({
                          pointId: datas.viewList[0].properties.id
                        })
                        .then(res => {
                          console.log("测点传感器的数据", res.data.data[0][0]);
                          if (res.data.data[0][0]) {
                            // 传感器信息
                            this.activeTab = 1;
                            let sensorId = res.data.data[0][0].id;
                            let sensorCode = res.data.data[0][0].code;
                            this.setSensorId(sensorId);
                            this.setSensorCode(sensorCode);
                            this.setSensor(res.data.data[0][0]);
                          } else {
                            this.setSensorId("");
                            this.setSensorCode("");
                            this.setSensor("");
                            this.$vs.notify({
                              text: "暂无传感器信息",
                              color: "warning",
                              icon: "warning"
                            });
                          }
                        });
                    }
                });


                  });
                });
              } else {
                let img = require("../../../assets/mapbox/bg.png");
                maps.updateImage({ url: img });
              }
            }

            console.log(this.imageUrl);
            // 更新地图上的点/图片/位置点
            var map = this.map.getSource("overlay");
            console.log(map);
            this.map.setZoom(15.9);
            map.updateImage({ url: this.imageUrl });
            if (data) {
              map.setCoordinates(data.coordinates);
            }
            // 渲染点位
            if (data && data.viewList.length > 0) {
              // 获取当前选中的一级分类 二级分类
              let firstIdList = this.value1;
              let secondIdList = this.value2;
              let _params = {
                bridgeId: this.bridgeId
                // facadeId: data.facadeId
              };
              if (firstIdList.length > 0) {
                _params.firstIdList = firstIdList;
              }
              if (secondIdList.length > 0) {
                _params.secondIdList = secondIdList;
              }
              // 获取一级分类截面数据
              this.$api.mearsuringPointSetting.getGm(_params).then(res => {
                console.log("过滤后的数据", res.data.data[0], data.viewList);
                let oldList = res.data.data[0];
                let newList = [];
                data.viewList.map((item, key) => {
                  if (oldList.length > 0) {
                    oldList.map((i, k) => {
                      if (item.properties.id == i.id) {
                        newList.push(item);
                      }
                    });
                  }
                });
                newList.map(item => {
                  this.initMarker(item);
                });
              });
            }
          });
      },
      deep: true,
      immediate: true
    },
    editableTabsValue: {
      handler(newVal) {
        this.setBridgeId(newVal);
        this.initName = "立面";
      }
    },
    activeTab: {
      handler(newVal, oldVal) {
        // 判断是实时历史超限
        if (this.activeTab == 1) {
          //  // 获取实时数据
          this.getRealData();
          this.xgGetRealData();
        }
        if (this.activeTab == 2 && oldVal == 1) {
          // 获取历史数据
          clearInterval(this.inter);
          clearInterval(this.xginter);
          this.loading = true;
          setTimeout(() => {
            this.getHistoryData();
            this.xgGetHistoryData();
          }, 15000);
        }
        if (this.activeTab == 2 && oldVal == 3) {
          // 获取历史数据
          clearInterval(this.inter);
          clearInterval(this.xginter);

          this.getHistoryData();
          this.xgGetHistoryData();
        }
        if (this.activeTab == 3) {
          clearInterval(this.inter);
          clearInterval(this.xginter);
          this.getCxData();
          this.xgGetCxData();
        }
      },
      deep: true,
      immediate: true
    },
    // 监听传感器变化
    // sensorId: {
    //   handler(newVal) {
    //     if (newVal) {
    //       // 判断是实时历史超限
    //       if (this.activeTab == 1) {
    //         // 获取实时数据
    //         // this.$api.mearsuringPointSetting
    //         //   .getRealData({
    //         //     sensorId: this.sensorId,
    //         //     sensorCode: this.sensorCode,
    //         //     bridgeId: this.bridgeId,
    //         //   })
    //         //   .then((res) => {
    //         //     console.log("实时数据", res);

    //         //   });

    //         let data = [];
    //         data.map((item, key) => {
    //           // xAxisData seriesData
    //           let time = this.parseTime(item.time);
    //           this.xAxisRealData.push(time);
    //           this.seriesRealData.push(item.value);
    //         });
    //       }
    //     }
    //   },
    //   deep: true,
    //   immediate: true
    // },

    // 监听相关点 id 变化
    selectXgPoint: {
      handler(newVal) {
        console.log("相关点id", newVal);
        this.$api.mearsuringPointSetting
          .getPointDetail({
            id: newVal
          })
          .then(res => {
            this.setxgpointid(res.data.data[0][0].id);
            this.setxgpointcode(res.data.data[0][0].code);
          });

        // 查询传感器
        this.$api.mearsuringPointSetting
          .getDeviceSensor({
            pointId: newVal
          })
          .then(res => {
            console.log("相关点传感器信息", res.data.data[0][0]);
            if (res.data.data[0][0]) {
              // 传感器信息
              this.activeTab = 1;
              let sensorId = res.data.data[0][0].id;
              let sensorCode = res.data.data[0][0].code;

              this.setXgSensorId(sensorId);
              this.setXgSensorCode(sensorCode);
              this.setXgSensor(res.data.data[0][0]);
              clearInterval(this.xginter);
              if (this.activeTab == 1) {
                this.xgGetRealData();
              }
              if (this.activeTab == 2) {
                this.xgGetHistoryData();
              }
              if (this.activeTab == 3) {
                this.xgGetCxData();
              }
            } else {
              clearInterval(this.xginter);
              this.setXgSensorId("");
              this.setXgSensorCode("");
              this.setXgSensor("");
              this.$vs.notify({
                text: "暂无传感器信息",
                color: "warning",
                icon: "warning"
              });
            }
          });
      },
      deep: true
    },
    // 相关点数组
    xgPointList: {
      handler(newVal) {
        this.options = [];
        if (newVal.length > 0) {
          newVal.map(item => {
            // 获取点的详细信息
            this.$api.mearsuringPointSetting
              .getPointDetail({
                id: item
              })
              .then(res => {
                let data = res.data.data[0][0];
                if (data) {
                  this.options.push({
                    value: data.id,
                    label: data.name
                  });
                }
              });
          });
        }
      },
      deep: true
    },

    value: {
      handler(newVal) {
        console.log(newVal);
        // 根据测点id 获取传感器 id
        this.setSelectXgPoint(newVal);
        this.getxgPointDetail(newVal);
      },
      deep: true
    },
    xgSensorId: {
      handler(newVal) {},
      deep: true
    }
  }
};
</script>

<style lang="scss" scoped>
.realMonitor {
  &-realData {
    margin-top: 16px;
  }
  &-bridgeImg {
    padding: 30px 5px;
    width: 100%;
    height: 214px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  &-tabContent {
    margin-top: 25px;
    //overflow: hidden;
    /deep/.el-tabs__header {
      margin: 0 0 10px;
    }
    /deep/.el-tabs__item {
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999;
    }
    /deep/.el-tabs__active-bar {
      background-color: #327bdc;
    }
    /deep/.el-tabs__item.is-active {
      font-size: 16px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #327bdc;
    }
  }
  &-left {
    width: 67%;
    float: left;
  }
  &-right {
    width: 33%;
    float: left;
    &-player {
      width: 100%;
      height: 330px;
    }
    &-point {
      width: 100%;
      height: auto;
      margin-top: 30px;
    }
  }
  &-realLine {
    width: 100%;
    height: 386px;
  }
}
.search {
  display: flex;
  justify-content: start;
  background: #fff;
  padding: 5px 20px;
  margin-bottom: 10px;
  border-radius: 3px;
  .seletBtn {
    margin-right: 20px;
    height: 40px;
  }
  .top {
    position: relative;
    top: 6px;
  }
}

/deep/.el-tabs--card > .el-tabs__header .el-tabs__item {
  border-bottom: 1px solid #e4e7ed !important;
}
/deep/.is-active.el-tabs__item.is-top.is-active.is-closable {
  background: #327bdc !important;
  color: #fff !important;
}

.mapContain {
  width: 100%;
}

.map {
  width: 70%;
  margin: 20px 0;
  height: 250px;
}
.secondMap {
  width: 26%;
  margin: 20px 0;
  height: 250px;
}
.topContainer {
  // background: chartreuse;
  display: flex;
  justify-content: space-between;
}
.realMonitor-tabContent {
  background: #fff !important;
  margin-top: 10px !important;
}
.baseLine {
  background: #fff !important;
  height: 420px;
}
.tabs {
  width: 600px;
  span {
    display: inline-block;
    width: 40px;
    text-align: center;
    font-size: 16px;
    line-height: 40px;
    margin-right: 40px;
    cursor: pointer;
  }
}
.activeTab {
  border-bottom: 2px solid #327bdc;
}
/deep/.el-loading-mask {
  z-index: 500000;
}
</style>
